<template>
	<view class="deep">
		<!-- 搜索 -->
		<view class="py-2 seach bg-white d-flex j-center a-center">
			<view class="px-3 d-flex py-1 rounded-50 span-18 bg-light-secondary">
				<u-icon   name="search" color="" size="28"></u-icon>
				<input class="ml-2" type="text" placeholder="搜索商品" @click="sendSeach" focus disabled="true"  />
			</view>
		</view>
		<scroll-view scroll-y="true" :style="{height: scrollHeight}" :scroll-top="scrollTop" @scroll="scroll" @scrolltolower="scrolltolower"
		 refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="100" @refresherpulling="onPulling"
            @refresherrefresh="onRefresh" @refresherrestore="onRestore">
			<view class="mt-5" v-if="u_loadmore">
				<u-loadmore status="loading" icon-type="circle" />
			</view>
			<view class="" v-else>
				<view v-if="sellList.length<=0" class="d-flex flex-column j-center a-center h_100">
						<image src="../../static/images/home/icon_no_data.png" mode="aspectFit" class="icon_no_data"></image>
						<view class="">暂无商品</view>
					</view>
				<!-- 商品卡片 -->
					<view  v-else class="goods_card bg-white m-2 p-3 rounded-20" v-for="(item,index) in sellList" :key="index">
						<view class="goods_card_head d-flex"  @click="goodsEdit(item)">
							<view class="goods_card_head_left">
								<image class="" :src="item.img.url?item.img.url:defaltImage" mode=""></image>
							</view>
							<view class="goods_card_head_right pl-2">
								<view class="d-flex">
									<view class="ellipsis">
										<image v-if="item.is_hot" src="../../static/images/goods/icon_goods_hot.png" class="mr" mode=""></image>
										<image v-if="item.is_new" src="../../static/images/goods/icon_goods_new.png" class="mr" mode=""></image>
										<image v-if="item.is_best" src="../../static/images/goods/icon_goods_best.png" class="mr" mode=""></image>
										<view class="chu mr d-inline-block" v-if="item.is_promote">促</view>
										{{item.name}}
									</view>
								</view>
								<view class="text-light-muted font">
									<text class="mr-3">库存：{{item.stock}}</text>
									<text>销量：{{item.sales_volume}}</text>
								</view>
								<view class="mt-5">
									<text class="text-danger mr-2">{{item.shop_price}}</text><text class="font text-light-muted tex line-through">{{item.market_price}}</text>
								</view>
							</view>
						</view>
						<view class="mt-2 font d-flex j-end" >
							<view class="goods_card_content_footer" v-for="(goodsItem,goodsIndex) in items" :key="goodsIndex" @click="goodsOpen(goodsItem,item)">
								<view>{{goodsItem.title}}</view>
							</view>
						</view>
					</view>	
					<view class="pb-2" v-if="!sellList.length<=0">
						<view class="" v-if="sellList.length==total"  @click="loadmores">
							<u-loadmore status="nomore" icon-type="circle" />
						</view>
						<view class="" v-else >
							<u-loadmore status="loading" icon-type="circle" />
						</view>
					</view>
			</view>
		</scroll-view>
		<!-- 改库存 -->
		<u-popup @open="open_focus" @close="close_focus"  v-model="mouseShow" negative-top="200" width="90%" mode="center" border-radius="14" :closeable="true" close-icon="close" close-icon-pos="top-right" close-icon-size="40">
				<view class="py-2 border-bottom">
					<view class="font-lg d-flex j-center a-center">修改库存</view>
				</view>
				<view class="py-3">
					<view class="d-flex j-center">
						<view class="d-flex flex-column ml-5 py-3 pl-5">
							<view class="">当前库存:<text class="text-danger ml-1">0</text></view>
							<view class="d-flex pt-3 a-center">
								<view>调整至:&nbsp;</view>
								<view class="ml-1 d-flex bg-light-secondary rounded-10 py-1"><input  type="digit" class="text-center" @focus="change_input"  focus :focus="firstFocus" v-model="modify_stock" @input="modify" /></view>
							</view>
						</view>	
					</view>
					<button type="warn" class="pupup" @click="stock">库存</button>
				</view>
		</u-popup>
		<!-- 智能权重 -->
		<u-popup v-model="weightShow" width="90%" mode="center" border-radius="14" :closeable="true" close-icon="close" close-icon-pos="top-right" close-icon-size="40">
				<view class="py-2 border-bottom">
					<view class="font-lg d-flex j-center a-center">智能权重</view>
				</view>
				<view class="bg-light-secondary pb-2">
					<view class="border-bottom  d-flex pl-2">
						<view class="border-right span-10 py-1">商品购买数量</view><view class="text-center span-10 py-1">0</view>
					</view>
					<view class="border-bottom d-flex pl-2">
						<view class="border-right span-10 py-1">商品退换数量</view><view class="text-center span-10 py-1">{{weightList.return_number!==null?'0':weightList.return_number}}</view>
					</view>
					<view class="border-bottom d-flex pl-2">
						<view class="border-right span-10 py-1">购买此商品的会员数量</view><view class="text-center span-10 py-1">{{weightList.user_number!==null?'0':weightList.user_number}}</view>
					</view>
					<view class="border-bottom d-flex pl-2">
						<view class="border-right span-10 py-1">对此商品评价数量</view><view class="text-center span-10 py-1">{{weightList.goods_comment_number!==null?'0':weightList.goods_comment_number}}</view>
					</view>
					<view class="border-bottom d-flex pl-2">
						<view class="border-right span-10 py-1">对此商品商家评价数量</view><view class="text-center span-10 py-1">{{weightList.merchants_comment_number!==null?'0':weightList.merchants_comment_number}}</view>
					</view>
					<view class="border-bottom d-flex pl-2">
						<view class="border-right span-10 py-1">会员关注此商品数量</view><view class="text-center span-10 py-1">{{weightList.user_attention_number!==null?'0':weightList.user_attention_number}}</view>
					</view>
					<view class="border-bottom d-flex pl-2">
						<view class="border-right span-10 py-1">人工干预值</view><view class="text-center span-10 py-1"><input placeholder="23456465" value="interfere" type="text" v-model="interfere" @input="interfereInput" @confirm="weight" /></view>
					</view>
				</view>
			</u-popup>
		<!-- 删除 -->
		<u-modal v-model="delShow" title="提示" :show-title="false"  show-confirm-button show-cancel-button @confirm="confirm">
			<view class="py-3">
				<view class="text-center">你确定要将商品移至回收站吗?</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	const SIZE = 10
	export default {
		data() {
			return {
				defaltImage:'../../static/images/goods/icon_default_image.png',
				sellList:[], // 售罄列表
				items:[
					{title:"改库存",off_id:1,offShow:false},
					{title:"智能权重",mind_id:1,offShow:false},
					{title:"删除",del_id:1,delShow:false},
				],
				modify_stock:'', // 修改库存
				mouseShow:false, // 改库存
				weightList:[], // 智能权重列表
				weightShow:false, // 智能权重
				interfere:0, // 人工干预值
				delShow:false, // 删除
				goods_id:"", // 商品id
				number:0, // 库存数量
				firstFocus:false, 
				scrollHeight:0, // 自适应高度
				u_loadmore:true, // 加载中
				triggered: false, // 下拉刷新
				more:1, // 第几页
				count:10, // 条数
				total:0,// 总条数
				scrollTop:0,
				old: {
					scrollTop: 0
				}
			}
		},
		onReady() {
			let _this=this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.seach').boundingClientRect()
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].bottom+ 'px';
					})
				}
			})
		},
		methods: {
			// 下拉刷新 自定义下拉刷新控件被下拉
			 onPulling(e) {
			    console.log("onpulling", e);
				this.triggered = true;
			},
			// 自定义下拉刷新被触发
			onRefresh() {
			    if (this._freshing) return;
			    this._freshing = true;
			    setTimeout(() => {
					this.getData()
					this.triggered = false;
					this._freshing = false;
			    }, 1000)
			},
			// 自定义下拉刷新被复位
			onRestore() {
			    this.triggered = 'restore'; // 需要重置
			    console.log("onRestore");
			},
			// 加载数据
			getData(){
				this.$H.post("admin/merchant/goods/list",{
					list_type:'soldout',
					pagination:{
						count:this.count,
						page:this.more
					}
				}).then(res=>{
					this.sellList=res.data
					console.log(res)	
				})
			},
			// 上拉加载函数
			scrolltolower(e){
				let that = this
				// 每次上拉加载的数据比上一次多十个
				that.count += SIZE
				if(that.sellList.length==that.total){
					return
				}else{
					setTimeout(()=>{
					    that.getData()
					},1000)
				}
			},
			// 滚动时触发
			scroll(e){
				this.old.scrollTop = e.detail.scrollTop
			},	
			// 回到顶部
			loadmores(){
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			},
			
			// 回收站确认
			confirm(){
				this.$H.post("admin/goods/trash",{id:this.goods_id}).then(res=>{
					console.log(res)
					this.$H.post("admin/merchant/goods/list",{list_type:'soldout'}).then(res=>{
						this.sellList=res.data
					})
				})
			},
			// 智能权重
			goodsOpen(goodsItem,item){
					this.goods_id=item.goods_id
				if(goodsItem.title=="改库存"){
					this.mouseShow=true
				}else if(goodsItem.title=="智能权重"){
					this.$H.post("admin/merchant/goods/intelligentWeight",{goods_id:item.goods_id}).then(res=>{
						this.weightList=res.data
					})
					this.weightShow=true
				}else if(goodsItem.title=="删除"){
					console.log(item)
					this.delShow=true
				}
			},
			// 监听input框
			modify(e){
				this.modify_stock=e.detail.value
			},
			// 修改库存
			stock(){
				this.$H.post("admin/merchant/goods/stock/update",{goods_id:this.goods_id,number:this.modify_stock}).then(res=>{
					this.mouseShow=false
					this.$H.post("admin/merchant/goods/list",{list_type:'soldout'}).then(res=>{
						this.sellList=res.data
					})
				})
			},
			// 智能权重 人工干预值
			weight(){
				this.$H.post("admin/merchant/goods/sort/update",{goods_id:this.goods_id,sort_order:this.interfere}).then(res=>{
					console.log(res)
				})
			},
			// 监听人工干预值框
			interfereInput(e){
				this.interfere=e.detail.value
			},
			
			// 详情
			goodsEdit(item){
				uni.navigateTo({
					url:"/pages/goods-edit/goods-edit?goods_id="+item.goods_id
				})
			},
			// 搜索页 ,
			sendSeach(){
				uni.navigateTo({
					url:"/pages/goods-seach/goods-seach?number="+JSON.stringify(this.number)
				})
			},
			// 改价 弹框聚焦
			change_input(e){
				console.log(e)
				this.firstFocus=true
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
			},
			// 关闭弹框
			close_focus(){
				this.firstFocus=false
			},
			open_focus(){
				this.change_input()
			},
		},
		onLoad() {
			this.$H.post("admin/merchant/goods/list",{
				list_type:'soldout',
				pagination:{
					count:this.count,
					page:this.more
				},
			}).then(res=>{
				this.total=res.paginated.total	
				this.sellList=res.data
				this.u_loadmore=false 
			})
			// 下拉刷新
			this._freshing = false;
		},
		onShow() {
			this.$H.post("admin/merchant/goods/list",{
					list_type:'soldout',
					pagination:{
						count:this.count,
						page:this.more
					},
				}).then(res=>{
				this.sellList=res.data
			})
		}
	}
</script>

<style>
	.goods_img{
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
	}
	.goods_card_head_left image{
		width: 180upx;
		height: 180upx;
		border-radius: 20upx;
	}
	.goods_card_head_right image{
		width: 30upx;
		height: 30upx;
	}
	.goods_card_content_footer view{
		border: 1px solid #808080;
		padding: 8upx 30upx;
		margin-right: 10upx;
		border-radius: 30upx;
	}
	.popupImg{
		width: 170upx;
		height: 170upx;
	}
	.deep /deep/ button{
		width: 70%;
		border-radius: 50upx;
		font-size: 30upx;
		background: linear-gradient(to right,#F31E3E,#FB4F37);
	}	
</style>
